<template>
    <div class="zhui">

        <van-nav-bar
            title="追漫"
            left-arrow
            @click-left="onClickLeft"
        />
        <div class="zhui-box">
            <div class="zhui-item">
                <zhuiman class="item" v-for="(item,i) in zhui" :key="i" :id="item" :lishi="lishi" />
            </div>
        </div>

        <div class="btn" v-show="isShow">
            <div class="login" @click="gotoUse">请先登录</div>
        </div>
        <div class="btn" v-show="zhui1">
            <div class="login">暂未加入追漫</div>
        </div>
    </div>
</template>

<script>
import zhuiman from '../components/Zhuiman.vue'
    export default {
        name:"Zhui",
        data(){
            return{
                isShow:false,
                zhui:[],
                lishi:[],
                zhui1:false
            }
        },
        components:{
            zhuiman
        },
        created(){
            let str = document.cookie.split(';')
            let obj = {}
            str.forEach(v => {
                obj[v.split('=')[0].trim()] = v.split('=')[1]
            });
            if (obj.login!='true') {
                this.isShow = true
            }else{
                let data = JSON.parse(localStorage.getItem("user"));
                if(data != null){
                    for (let i = 0; i < data.length; i++) {
                        if (obj.phone == data[i].phone) {
                            this.zhui = data[i].zhui
                            this.lishi = data[i].lishi
                        }
                    }
                    if(this.zhui.length===0){
                        this.zhui1 = true
                    }
                }else{
                    this.isShow = true
                }


            }
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1);
            },
            gotoUse(){
                this.$router.push({name:"login"})
            }
        }
    }
</script>

<style lang="less" scoped>
.zhui{
    position: relative;
}
.btn{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    .login{
        width: 35%;
        padding: 8px 0px;
        background-color: rgba(44, 44, 252, 0.992);
        border-radius: 15px;
        text-align: center;
        color: #fff;
        margin: 0 auto;
    }
    
}
.zhui-box{
    padding: 10px;
    .zhui-item{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .item{
            width: calc(33.33% - 8px + 8px / 3);
            margin-top: 10px;
            margin-right: 8px;
            .item-img{
                width: 100%;
                height: 150px;
                border-radius: 5px;
                overflow: hidden;
                > img {
                    height: 100%;
                    display: block;
                }
            }
            .item-title{
                width: 100%;
                padding-top: 5px;
            }
            .item-number{
                color: #9c9ba1
            }
        }
        .item:nth-child(3n){
            margin-right: 0px;
        }
    }
}
</style>